.msg-app__convo__msgs {
  @extend %flex-column;

  flex: 1 1 auto;
  overflow-y: auto;

  &__init {
    flex: 1 1 auto;
  }

  &__more {
    margin: 2em auto;
  }

  &__getting-more {
    flex: 1 1 auto;
  }

  &__typing {
    color: $c-font-dim;
  }

  &__content {
    @extend %flex-column, %break-word;

    flex: 0 0 auto;
    padding: 3em 3vw 1em 3vw;
  }

  group {
    @extend %flex-column;

    margin: 0.5em 0;
  }

  mine,
  their,
  day {
    @extend %zalgoverflow;

    border-radius: 6px;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);

    @if $theme-dark {
      box-shadow: 0 1px 0.5px rgb(0, 0, 0);
    }

    margin: 0.2em 0;
    padding: 0.5em 1em;
    color: $c-font-clear;
    max-width: 70%;
  }

  day {
    @extend %roboto;

    background: mix($c-primary, $c-bg-box, 15%);
    align-self: center;
    font-size: 0.9em;
    color: $c-font;
    margin: 0.5em 0;
  }

  mine {
    align-self: flex-end;
    background: mix($c-msg, $c-bg-box, 15%);

    &:first-child {
      border-top-right-radius: 0;
    }
  }

  their {
    align-self: flex-start;
    background: mix($c-brag, $c-bg-box, 15%);

    &:first-child {
      border-top-left-radius: 0;
    }
  }

  em {
    @extend %roboto;

    color: $c-font-dim;
    font-size: 0.8em;
    float: right;
    margin: 0.4em 0 0 2em;
  }

  img {
    @extend %box-neat;

    max-width: 100%;
    max-height: 40vh;
  }

  .has-embed {
    max-width: 90%;
    width: 90%;
  }

  .embed {
    @extend %video;

    &--game {
      @extend %game-embed;
    }

    &.not-found {
      height: 100px;
      padding: 0;
    }
  }
}
